<template>
  <div>
    <nav-bar class="home-navbar">
      <!-- 在顶部navbar插件的中间插槽中放入页面标题 -->
      <span slot="app-navbar-center" class="home-navbar-title">优品商城</span>
    </nav-bar>
    <better-scroll ref="scroll" @scroll="scroll">
      <div class="list_wrapper">
        <div class="list_item">热门推荐</div>
        <div class="list_item">手机数码</div>
        <div class="list_item">日用百货</div>
        <div class="list_item">家用电器</div>
        <div class="list_item">玩具乐器</div>
        <div class="list_item">家具厨具</div>
        <div class="list_item">时尚搭配</div>
        <div class="list_item">水果美食</div>
        <div class="list_item">男装鞋服</div>
        <div class="list_item">美妆护肤</div>
      </div>
    </better-scroll>
  </div>
</template>

<script>
// 导入滚动，使页面具有滚动效果
import BetterScroll from "@/components/common/scroll/scroll.vue";
// 导入顶部navbar插件
import NavBar from "@/components/common/navbar/NavBar.vue";
export default {
  components: {
    BetterScroll,
    NavBar,
  },
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style scoped>
.home-navbar {
  background-color: #ea8685;
  z-index: 10;
}
.home-navbar-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5em;
  color: #ffffff;
  text-align: center;
}
.list_wrapper{
  display:flex;
}
</style>